<template>

    <div class="home">
<!--    左-->
     <div class="left">
         <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                  :collapse="isCollapse" :unique-opened="true"
                  style="height: 100%"


                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#1E9FFF">
             <el-submenu v-for="(arr, key, i) in navMenuObj" :index="i+''">
                 <template slot="title">
                     <i class="el-icon-menu"></i>
                     <span slot="title">{{key}}</span>
                 </template>
                 <el-menu-item-group v-if="arr.length>0">
                     <el-menu-item v-for="(title, j) in arr" :index="i+'-'+j" :key="j">
                         <div @click="handleSecondTitle(title, j)">{{title}}</div>
                     </el-menu-item>

                 </el-menu-item-group>

             </el-submenu>
         </el-menu>





     </div>

<!--右-->
        <div  :class="{right:true, active:isActive}">
            <div class="right-top">
         <HomeTopNav :navarr="navArr" @navaction = "navAction"></HomeTopNav>

            </div>

            <div class="right-bottom">
                <router-view></router-view>
            </div>
        </div>



    </div>
</template>

<script>
    import HomeTopNav from "@/components/home/HomeTopNav";
    export default {
        name: "HomeView",
        components: {HomeTopNav},
        data:function () {
          return{
             navMenuObj:{
               "用户管理":[],
               "我的":["我的回答",  "我的课程收藏", ],
               "系统管理":["文章分类管理","轮播图","心理测评","公益中心"],
               "咨询师管理":["咨询师信息(分类，擅长)","擅长领域","收费标准"],
               "课程":["课程信息(课程图片路径)","课程收藏"],
             },
              isCollapse: false,
              navFirstTitle:"",
              navSecondTitle:"",
              navArr:[],
              isActive:false,
              routerArr:{
                "用户管理":"/user",
                "我的回答":"/my/huida",
                "我的课程收藏":"/my/kechengshoucang",
                "文章分类管理":"/xitong/wenzhang",
                "轮播图":"/xitong/lunbotu",
                "心理测评":"/xitong/xinliceping",
                "公益中心":"/xitong/gongyi",
                "咨询师信息(分类，擅长)":"/zixunshi/zixunshixinxi",
                "收费标准":"/zixunshi/shoufeibiaozhun",
                "课程信息(课程图片路径)":"/kecheng/kechengxinxi",
                "课程收藏":"/kecheng/shoucang",
                "擅长领域":"/zixunshi/shanchanglingyu"
              }
          }
        },
        methods: {
            handleOpen(key, keyPath) {
                //点击的一级标题
                this.navFirstTitle = Object.keys(this.navMenuObj)[key];
                console.log(this.navFirstTitle);
                //类似小区管理 只有一级模块
                if(this.navMenuObj[this.navFirstTitle].length == 0){
                this.navArr = [ this.navFirstTitle]
                    let router = this.routerArr[this.navFirstTitle];
                this.$router.push(router).catch(()=>{});
                }
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //二级标题的点击事件 将来在此切换路由
            handleSecondTitle(title, index){
                this.navSecondTitle = title;
                this.navArr = [];
                this.navArr.push(this.navFirstTitle);
                this.navArr.push(this.navSecondTitle);
            //    --------------------------------
                //切换路由
                console.log(title);
                let router = this.routerArr[title];
                if (router != null && router.length != 0){
                     this.$router.push(router).catch(()=>{});
                }


            },
            navAction(isShow){
                this.isCollapse = !this.isCollapse;
                this.isActive = ! this.isActive;
            }
        },
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 210px;
        min-height: 400px;
    }

.left{
    position: fixed;
    left: 0;
    top:0;
    float: left;
    height: 100%;
    /*background-color:#545c64;*/
    /*height: 2000px;*/
    /*background-color: red;*/
}
    .right{
        /*width: 100%;*/
        /*height: 2000px;*/
        /*background-color: skyblue;*/
        margin-left: 220px;
        transition: margin-left .3s ;

    }
    .active{
       margin-left: 80px;
    }

    .right-bottom{
        /*background-color: yellowgreen;*/
        /*height: 1000px;*/
        margin-top: 10px;
    }



</style>